<template>
  <div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd" v-if="header" @click="onClickHeader" v-html="header"></div>
    <div class="weui-panel__bd">
      <!--type==='1'-->
      <template v-if="type === '1'">
        <a :href="getUrl(item.url)" v-for="item in list" @click.prevent="onItemClick(item)" class="weui-media-box weui-media-box_appmsg">
          <div class="weui-media-box__hd" v-if="item.cover">
            <img class="weui-media-box__thumb" :src="item.cover" alt="">
          </div>
          <div class="weui-media-box__bd">
            <h4 class="weui-media-box__title">{{item.title}} {{testing}} </h4>
            <p class="weui-media-box__desc">{{item.intro}}</p>
          </div>
          <!-- <div   @click="buy(item.purchased)"> -->
          <div  class="preclass"    :class="{ selected: item.purchased }">
<!--  @click="toggle($event)"   -->
            <!-- <span v&#45;if="!item.purchased">{{item.purchased}} 11</span> -->
            <!-- <slot name="plus" ></slot> -->

      <div class="choice" >
        <div @click="addbtn($event,item.id,item.price)" class="choicebtn "></div>
      </div>
          </div>
          <!-- <div class="weui&#45;cell__hd"><input type="checkbox" name="vux&#45;checkbox&#45;abnsy" id="checkbox_abnsy_1" class="weui&#45;check" value="Japan"> <i class="weui&#45;icon&#45;checked vux&#45;checklist&#45;icon&#45;checked"></i></div> -->
          <!-- <div class="weui&#45;cell__hd"> -->
          <!--   <input type="checkbox" class="weui&#45;check"  id="12123123" > -->
          <!--   <i class="weui&#45;icon&#45;checked vux&#45;checklist&#45;icon&#45;checked"></i> -->
          <!-- </div> -->
        </a>
      </template>
      <!--type==='2'-->
      <template v-if="type === '2'">
        <div class="weui-media-box weui-media-box_text" v-for="item in list" @click.prevent="onItemClick(item)">
            <h4 class="weui-media-box__title">{{item.title}}</h4>
            <p class="weui-media-box__desc">{{item.desc}}</p>
        </div>
      </template>
      <!--type==='3'-->
      <template v-if="type === '3'">
        <div class="weui-media-box weui-media-box_small-appmsg">
            <div class="weui-cells">
              <a class="weui-cell weui-cell_access" :href="getUrl(item.url)" v-for="item in list" @click.prevent="onItemClick(item)">
                <div class="weui-cell__hd">
                  <img :src="item.src" alt="" style="width:20px;margin-right:5px;display:block">
                </div>
                <div class="weui-cell__bd">
                  <p>{{item.title}}</p>
                </div>
                <span class="weui-cell__ft"></span>
              </a>
            </div>
        </div>
      </template>
    </div>
    <div class="weui-panel__ft">
      <a class="weui-cell weui-cell_access weui-cell_link" :href="getUrl(footer.url)" v-if="footer && type !== '3'" @click.prevent="onClickFooter">
        <div class="weui-cell__bd" v-html="footer.title"></div>
      </a>
    </div>
  </div>
</template>

<script>
import { go, getUrl } from '../../libs/router'

export default {
  data() {
    return {
      payload:Number
    }
  },
  props: {
    testing:String,
    header: String,
    footer: Object,
    list: Array,
    type: {
      type: String,
      default: '1'
    }
  },
  methods: {

    addbtn($event,num,price,){
      alert(price)
      // var payload = 0;
alert(num)
console.info(num);
      if($event.target.classList.contains('choiced')){
        // alert(334)
        payload = payload - price
        $event.target.classList.toggle('choiced')
        // $event.target.classList.toggle('choice')
        alert(payload)
      }
      if(!$event.target.classList.contains('choice')){
        $event.target.classList.toggle('choiced')
        $event.target.classList.toggle('choice')
          payload = payload + price
        // alert(32)
        alert(payload)
      }
      // this.as = false
    },
    cancel(e) {
          let element = e.currentTarget;
          if (element.classList.contains('active')) {
                  element.classList.toggle('active');
                }
        },
        togglee(e) {
              let element = e.currentTarget;
              if (!element.classList.contains('active')) {
                      element.classList.toggle('active');
                    }
            },
     toggle: function ($event) {
           console.info($event.target);
           $event.target.innerHTML =" <span>BBBhh</span> "
           $event.target.classList.toggle('selected')
           var xx = $($event.target)
           console.info(xx);
             // event.preventDefault();
            event.target.disabled = true;
         },
    buy(e){
      e = true
      // e.css.nn
      alert(e)
      // this.$store.commit
      // $('.choice').css('display','none');
console.info(3);
    },
    getUrl (url) {
      return getUrl(url, this.$router)
    },
    onClickFooter () {
      this.$emit('on-click-footer')
      go(this.footer.url, this.$router)
    },
    onClickHeader () {
      this.$emit('on-click-header')
    },
    onItemClick (item) {
      this.$emit('on-click-item', item)
      go(item.url, this.$router)
    }
  }
}
</script>

<style lang="less">
/* .preclass { */
/*   color:#d2d;background:#f38 */
/* } */
.selected {background: #000!important; color:red; padding:100px; background:blue}

@import '../../styles/weui/widget/weui_cell/weui_cell_global';
@import '../../styles/weui/widget/weui_cell/weui_access';
@import '../../styles/weui/widget/weui_panel/weui_panel';
@import '../../styles/weui/widget/weui_media_box/weui_media_box';

@import '../../styles/weui/widget/weui_cell/weui_cell_global';
@import '../../styles/weui/widget/weui_cell/weui_check';

.weui-cells_checkbox .weui-check:checked + .vux-checklist-icon-checked:before {
  color: @checklist-icon-active-color;
}

.weui-cells_checkbox > label > * {
  pointer-events: none;
}

.vux-checklist-label-left {
  flex-direction: row-reverse;
}

.weui-panel .weui-cell:first-child:before {
  display: block;
}
.vux-check-icon {
  display: inline-block;
}
.vux-check-icon > span {
  line-height: 23px;
  color: #222;
  vertical-align: middle;
}
.vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
  color: @check-icon-color-checked;
}


    .choice .choicebtn{ display:block; width:27px; height:27px; background:url(../../assets/images/buy_icon_addto.png) no-repeat center; background-size:contain;}
    .choice .choicebtn.choiced{ width:27px; height:27px; background:url(../../assets/images/buy_icon_choice.png) no-repeat center; background-size:contain;}

    .choice .choicebtn.bought{ width:27px; height:27px; background:url(../../assets/images/buy_icon_yigou.png) no-repeat center; background-size:contain;}
</style>
